<template>
	<view class="container">
		<view class="header">
			<view class="title">回到顶部</view>
			<view class="sub-title">可设置bottom，right值，可设置距离顶部多少距离显示，向下滑动页面查看效果</view>
		</view>
		<view class="tui-btn-box">
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(1)">显示回首页按钮</tui-button>
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(2)">显示分享按钮</tui-button>
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(3)">全部显示</tui-button>
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(4)">隐藏回顶部按钮</tui-button>
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(5)">只显示回首页按钮</tui-button>
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(6)">只显示分享按钮</tui-button>
			<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="setParams(7)">只显示回顶部按钮</tui-button>
		</view>
		<view class="tui-bottom-text">到达底部~</view>
		<tui-scroll-top :scrollTop="scrollTop" :isIndex="isIndex" :isShare="isShare" :customShare="customShare" @index="goIndex" @share="share"></tui-scroll-top>
	</view>
</template>

<script>
const thorui = require('@/components/common/tui-clipboard/tui-clipboard.js');
export default {
	data() {
		return {
			scrollTop: 0,
			isIndex: false,
			isShare: false,
			hideTop: false,
			customShare: true
		};
	},
	onLoad() {
		// #ifdef MP
		this.customShare = false;
		// #endif
	},
	methods: {
		setParams(type) {
			this.hideTop = false;
			this.isIndex = false;
			this.isShare = false;
			switch (type) {
				case 1:
					this.isIndex = true;
					break;
				case 2:
					this.isShare = true;
					break;
				case 3:
					this.isIndex = true;
					this.isShare = true;
					break;
				case 4:
					this.hideTop = true;
					this.isIndex = true;
					this.isShare = true;
					break;
				case 5:
					this.isIndex = true;
					this.hideTop = true;
					break;
				case 6:
					this.isShare = true;
					this.hideTop = true;
					break;
				default:
					break;
			}
		},
		goIndex() {
			uni.switchTab({
				url: '/pages/tabbar/index/index'
			});
		},
		share() {
			//#ifdef APP-PLUS
			plus.share.sendWithSystem(
				{
					content: 'ThorUI组件库，uni-app版本，v3编译，支持nvue uni-app编译模式（原weex编译模式），easycom组件模式（无需手动引入，开发工具自带智能感知）',
					href: 'https://www.thorui.cn/'
				},
				function() {
					console.log('分享成功');
				},
				function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				}
			);
			//#endif

			// #ifdef H5
			thorui.getClipboardData('https://www.thorui.cn/', res => {
				// #ifdef H5 || MP-ALIPAY
				if (res) {
					this.tui.toast('复制链接成功，快去分享吧~');
				} else {
					this.tui.toast('复制链接失败~');
				}
				// #endif
			});
			// #endif
		}
	},
	onPageScroll(e) {
		if (!this.hideTop) {
			this.scrollTop = e.scrollTop;
		}
	}
};
</script>

<style>
.container {
	padding: 20rpx 0 120rpx 0;
	box-sizing: border-box;
}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}
.tui-btn-box {
	padding: 10rpx 40rpx;
	box-sizing: border-box;
}
.tui-bottom-text {
	padding-top: 600px;
	text-align: center;
	font-size: 24rpx;
	color: #7a7a7a;
}
</style>
